
// rem适配
function setFont() {
    let html = document.querySelector('html')
    let width = html.clientWidth
    if (width > 1920) width = 1920
    if (width < 1024) width = 1024
    let fontSize = width / 80 + 'px'
    html.style.fontSize = fontSize
}
setFont()
// 浏览器窗口大小改变时，重新计算fontSize
window.onresize = function () {
    setFont()
}

// 点击添加按钮，向表格添加数据

let data = []


$('button').on('click', function () {
    let obj = {}
    let username = $('.username').val()
    let score = $('.score').val()
    let salary = $('.salary').val()
    obj.username = username
    obj.score = score
    obj.salary = salary
    data.push(obj)
    let tr
    // console.log(data)
    for (let i = 0; i < data.length; i++) {
        tr = `<tr>
        <td>${data[i].username}</td>
        <td>${data[i].score}</td>
        <td>${data[i].salary}</td>
        </tr>
    `
    }
   
    $('.biao').append(tr)
    $('input').val('')
    let uname1=[]
    let score1 = []
    let salary1 = []
    function render() {
        for (i = 0; i < data.length; i++){
            uname1.push(data[i].username)
            score1.push(data[i].score)
            salary1.push(data[i].salary)
        }
    }
    render()
    // console.log(uname1); 
    
        
    // 插入图表
    // 折线图
        ; (function () {
            let myChart = echarts.init($('.line')[0])
            let option = {
                grid: {
                    left:20,
                    top:20,
                    right:20,
                    bottom: 20,
                    containLabel:true
                },
                xAxis: {
                    type: 'category',
                    data: uname1,
                    axisLine: {
                        show: true,
                        lineStyle:{
                            color:'#1f74ce'
                        }
                    },
                    boundaryGap: true,
                    axisTick: {
                        show: true,
                        alignWithLabel:true,
                    }
                },
                
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle:{
                            color:'#1f74ce'
                        }
                    },
                    splitLine:{
                        show:false,
                    },
                    axisTick:{
                        show:true
                    }
                    
                },
                series: [{
                    data: score1,
                    type: 'line',
                    smooth: true,
                    areaStyle:{
                        color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#d7e1e0' // 0% 处的颜色
                }, {
                    offset: 1, color: '#3e89c7' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
                    }
                
                }]
            };
            myChart.setOption(option)
        })()
    
        // 柱状图
        ; (function () {
            let myChart = echarts.init($('.bar')[0])
            let option = {
                grid: {
                    left:20,
                    top:20,
                    right:20,
                    bottom: 20,
                    containLabel:true
                },
                xAxis: {
                    type: 'category',
                    data: uname1,
                    axisLine: {
                        show: true,
                        lineStyle:{
                            color:'#1f74ce'
                        }
                    },
                    boundaryGap: true,
                    axisTick: {
                        show: true,
                        alignWithLabel:true,
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle:{
                            color:'#1f74ce'
                        }
                    },
                    splitLine:{
                        show:false,
                    },
                    axisTick:{
                        show:true
                    }
                },
                series: [{
                    data: salary1,
                    type: 'bar',
                    barWidth: 30,
                    itemStyle:{
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#d7e1e0' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#3e89c7' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            };
            myChart.setOption(option)
        })()

})
   
       

    